﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="wFrmGMap.aspx.cs" Inherits="Crosland.Automotriz.Web.CRM.wFrmGMap" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="js_maps/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"></script>
    <script src="js_maps/gmaps.js" type="text/javascript"></script>

    <script language="javascript" type="text/javascript">
        $(function () {
            var markers = Array();
            var infowindowActivo = false;
            inicializaGoogleMaps();


            function inicializaGoogleMaps() {

                var LatLongIco = '';
                var LatLongIco_c = '';
                var zoom = 0;

                LatLongIco = $("#LatLongIco").html();
                zoom = $("#Zoom").html();

                LatLongIco_c = LatLongIco.split('==');

                if (LatLongIco_c.length == 2) {
                    if (LatLongIco_c[1] == "") {
                        LatLongIco_c.splice(1, 1);
                    }
                }

                if (LatLongIco_c.length == 1) {
                    LatLongIco_c_m = LatLongIco_c[0].split('*')
                    var latLng = new google.maps.LatLng(LatLongIco_c_m[0], LatLongIco_c_m[1]);
                }
                else {
                    var latLng = new google.maps.LatLng(-12.0534976, -77.0517034);
                }

                var mapOptions = {
                    center: latLng,
                    zoom: parseInt(zoom),
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                }

                var map = new google.maps.Map(document.getElementById("map"), mapOptions);
                setGoogleMarkers(map, LatLongIco_c);
            }

            function setGoogleMarkers(map, locations) {
                for (var i = 0; i < locations.length; i++) {

                    var LatLongIco_c_m = '';
                    LatLongIco_c_m = locations[i].split('*')

                    //Si hay valores creamos un objeto Latlng
                    if (LatLongIco_c_m[0] == '' && LatLongIco_c_m[1] == '') {
                        var latLng = new google.maps.LatLng(-9.750000, -76.000000);
                    }
                    else {
                        if (LatLongIco_c_m[0] == '0' && LatLongIco_c_m[1] == '0') {
                            var latLng = new google.maps.LatLng(-9.750000, -76.000000);
                        }
                        else {
                            var latLng = new google.maps.LatLng(LatLongIco_c_m[0], LatLongIco_c_m[1]);
                        }
                    }

                    if (LatLongIco_c_m[2] == "") {
                    } else {
                        if (LatLongIco_c_m[2] == "sinicono") {
                            markers[i] = new google.maps.Marker({
                                map: map,
                                position: latLng,
                            });

                            var contentString =
                            '<table class="tabla-detalle-map-marcador">' +
                                '<tr>' +
                                    '<td class="td-maps">' +
                                        '<div class="div-maps-desp"><label class="label-maps-desp">Local&nbsp;</label></div>' +
                                        '<div class="div-maps-dos-puntos"><label class="label-maps-dos-puntos">:</Label></div>' +
                                    '</td>' +
                                    '<td>' + LatLongIco_c_m[4] + '</td>' +
                                '</tr>' +
                                '<tr>' +
                                    '<td class="td-maps">' +
                                        '<div class="div-maps-desp"><label class="label-maps-desp">Departamento&nbsp;</label></div>' +
                                        '<div class="div-maps-dos-puntos"><label class="label-maps-dos-puntos">:</Label></div>' +
                                    '</td>' +
                                    '<td>' + LatLongIco_c_m[5] + '</td>' +
                                '</tr>' +
                                '<tr>' +
                                    '<td class="td-maps">' +
                                        '<div class="div-maps-desp"><label class="label-maps-desp">Provincia&nbsp;</label></div>' +
                                        '<div class="div-maps-dos-puntos"><label class="label-maps-dos-puntos">:</Label></div>' +
                                    '</td>' +
                                    '<td>' + LatLongIco_c_m[6] + '</td>' +
                                '</tr>' +
                                '<tr>' +
                                    '<td class="td-maps">' +
                                        '<div class="div-maps-desp"><label class="label-maps-desp">Distrito&nbsp;</label></div>' +
                                        '<div class="div-maps-dos-puntos"><label class="label-maps-dos-puntos">:</Label></div>' +
                                    '</td>' +
                                    '<td>' + LatLongIco_c_m[7] + '</td>' +
                                '</tr>' +
                                '<tr>' +
                                    '<td class="td-maps">' +
                                        '<div class="div-maps-desp"><label class="label-maps-desp">Dirección&nbsp;</label></div>' +
                                        '<div class="div-maps-dos-puntos"><label class="label-maps-dos-puntos">:</Label></div>' +
                                    '</td>' +
                                    '<td>' + LatLongIco_c_m[8] + '</td>' +
                                '</tr>' +
                            '</table>';


                            markers[i].infoWindow = new google.maps.InfoWindow({
                                content: contentString
                            });

                            google.maps.event.addListener(markers[i], 'click', function () {
                                if (infowindowActivo)
                                    infowindowActivo.close();
                                infowindowActivo = this.infoWindow;
                                infowindowActivo.open(map, this);
                            });
                        }
                        else {
                            markers[i] = new google.maps.Marker({
                                map: map,
                                position: latLng,
                                icon: LatLongIco_c_m[2]
                            });

                            var contentString =
                            '<table class="tabla-detalle-map-marcador">' +
                                '<tr>' +
                                    '<td class="td-maps">' +
                                        '<div class="div-maps-desp"><label class="label-maps-desp">Cliente&nbsp;</label></div>' +
                                        '<div class="div-maps-dos-puntos"><label class="label-maps-dos-puntos">:</Label></div>' +
                                    '</td>' +
                                    '<td>' + LatLongIco_c_m[3] + '</td>' +
                                '</tr>' +
                                '<tr>' +
                                    '<td class="td-maps">' +
                                        '<div class="div-maps-desp"><label class="label-maps-desp">Local&nbsp;</label></div>' +
                                        '<div class="div-maps-dos-puntos"><label class="label-maps-dos-puntos">:</Label></div>' +
                                    '</td>' +
                                    '<td>' + LatLongIco_c_m[4] + '</td>' +
                                '</tr>' +
                                '<tr>' +
                                    '<td class="td-maps">' +
                                        '<div class="div-maps-desp"><label class="label-maps-desp">Departamento&nbsp;</label></div>' +
                                        '<div class="div-maps-dos-puntos"><label class="label-maps-dos-puntos">:</Label></div>' +
                                    '</td>' +
                                    '<td>' + LatLongIco_c_m[5] + '</td>' +
                                '</tr>' +
                                '<tr>' +
                                    '<td class="td-maps">' +
                                        '<div class="div-maps-desp"><label class="label-maps-desp">Provincia&nbsp;</label></div>' +
                                        '<div class="div-maps-dos-puntos"><label class="label-maps-dos-puntos">:</Label></div>' +
                                    '</td>' +
                                    '<td>' + LatLongIco_c_m[6] + '</td>' +
                                '</tr>' +
                                '<tr>' +
                                    '<td class="td-maps">' +
                                        '<div class="div-maps-desp"><label class="label-maps-desp">Distrito&nbsp;</label></div>' +
                                        '<div class="div-maps-dos-puntos"><label class="label-maps-dos-puntos">:</Label></div>' +
                                    '</td>' +
                                    '<td>' + LatLongIco_c_m[7] + '</td>' +
                                '</tr>' +
                                '<tr>' +
                                    '<td class="td-maps">' +
                                        '<div class="div-maps-desp"><label class="label-maps-desp">Dirección&nbsp;</label></div>' +
                                        '<div class="div-maps-dos-puntos"><label class="label-maps-dos-puntos">:</Label></div>' +
                                    '</td>' +
                                    '<td>' + LatLongIco_c_m[8] + '</td>' +
                                '</tr>' +
                                '<tr>' +
                                    '<td class="td-maps">' +
                                        '<div class="div-maps-desp"><label class="label-maps-desp">Supervisor&nbsp;</label></div>' +
                                        '<div class="div-maps-dos-puntos"><label class="label-maps-dos-puntos">:</Label></div>' +
                                    '</td>' +
                                    '<td>' + LatLongIco_c_m[9] + '</td>' +
                                '</tr>' +
                                '<tr>' +
                                    '<td colspan="2">' +
                                        '<div class="div-maps-botones">' +
                                            //'<asp:HyperLink ID="HyperLink1" runat="server">HyperLink</asp:HyperLink>'+
                                        '<a href="wFrmClienteLocalActualizar.aspx?IdLocal=' + LatLongIco_c_m[10] + '&IdCliente=' + LatLongIco_c_m[11] + '" onClick="window.open(this.href, this.target, width=350,height=420); return false;" target="popup" class="link-maps">Detalles</a> ' +
                                        '</div>' +
                                    '</td>' +
                                '</tr>' +
                            '</table>';


                            markers[i].infoWindow = new google.maps.InfoWindow({
                                content: contentString
                            });

                            google.maps.event.addListener(markers[i], 'click', function () {
                                if (infowindowActivo)
                                    infowindowActivo.close();
                                infowindowActivo = this.infoWindow;
                                infowindowActivo.open(map, this);
                            });

                        }
                    }
                }
            }

            function Mostrar_Detalle_del_Marcador_sin_Icono() {

            }

            function Mostrar_Detalle_del_Marcador_con_Icono() {
            }



            //////            var map;
            //////            var geocoder = null;
            //////            var marker = Array(); ;

            //////            var zoom = 0;
            //////            var LatLongIco = '';
            //////            var LatLongIco_c = '';
            //////            var LatLongIco_c_m = '';
            //////            var infowindowActivo = false;

            //////            LatLongIco = $("#LatLongIco").html();
            //////            zoom = $("#Zoom").html();

            //////            LatLongIco_c = LatLongIco.split(',');
            //////            //            console.log(LatLongIco_c);


            //////            if (LatLongIco_c.length == 2) {
            //////                if (LatLongIco_c[1] == "") {
            //////                    LatLongIco_c.splice(1, 1);
            //////                }
            //////            }

            //////            if (LatLongIco_c.length == 1) {
            //////                LatLongIco_c_m = LatLongIco_c[0].split('*')
            //////                var latLng = new google.maps.LatLng(LatLongIco_c_m[0], LatLongIco_c_m[1]);
            //////            }
            //////            else {
            //////                var latLng = new google.maps.LatLng(-12.0534976, -77.0517034);
            //////            }

            //////            //Definimos algunas opciones del mapa a crear
            //////            var myOptions = {
            //////                center: latLng, //centro del mapa
            //////                zoom: parseInt(zoom), //zoom del mapa
            //////                mapTypeId: google.maps.MapTypeId.ROADMAP //tipo de mapa, carretera, híbrido,etc
            //////            };


            //////            //creamos el mapa con las opciones anteriores y le pasamos el elemento div
            //////            map = new google.maps.Map(document.getElementById('map'), myOptions);
            //////            for (var i in LatLongIco_c) {
            //////                LatLongIco_c_m = '';
            //////                LatLongIco_c_m = LatLongIco_c[i].split('*')

            //////                console.log(LatLongIco_c_m);
            //////                //Si hay valores creamos un objeto Latlng
            //////                if (LatLongIco_c_m[0] == '' && LatLongIco_c_m[1] == '') {
            //////                    var latLng = new google.maps.LatLng(-9.750000, -76.000000);
            //////                }
            //////                else {
            //////                    if (LatLongIco_c_m[0] == '0' && LatLongIco_c_m[1] == '0') {
            //////                        var latLng = new google.maps.LatLng(-9.750000, -76.000000);
            //////                    }
            //////                    else {
            //////                        var latLng = new google.maps.LatLng(LatLongIco_c_m[0], LatLongIco_c_m[1]);
            //////                    }
            //////                }

            //////                if (LatLongIco_c_m[2] == "") {
            //////                } else {
            //////                    if (LatLongIco_c_m[2] == "sinicono") {
            //////                        marker[i] = new google.maps.Marker({
            //////                            map: map,
            //////                            position: latLng
            //////                        });
            //////                    }
            //////                    else {
            //////                        marker[i] = new google.maps.Marker({
            //////                            map: map,
            //////                            position: latLng,
            //////                            icon: LatLongIco_c_m[2]
            //////                        });

            //////                        var contentString =
            //////                        '<table>' +
            //////                            '<tr>' +
            //////                                '<td><strong>Cliente:</strong></td>' +
            //////                                '<td>'+LatLongIco_c_m[3]+'</td>' +
            //////                            '</tr>' +
            //////                        '</table>';


            //////                        marker[i].infowindow = new google.maps.InfoWindow({
            //////                            content: contentString
            //////                        });


            //////                        google.maps.event.addListener(marker[i], 'click', function () {
            //////                            if (infowindowActivo)
            //////                                infowindowActivo.close();
            //////                            infowindowActivo = this.infoWindow;
            //////                            infowindowActivo.open(map, this);
            //////                        });
            //////                    }
            //////                }
            //////            }
        });
    </script>

    <style type="text/css">
        #map
        {
            display: block;
            width: 100%;
            height: 600px;
            -moz-box-shadow: 0px 5px 20px #ccc;
            -webkit-box-shadow: 0px 5px 20px #ccc;
            box-shadow: 0px 5px 20px #ccc;
        }
        .label
        {
            display: none;
            visibility: hidden;
        }
        .tabla-detalle-map-marcador
        {
            color: black;
        }
        .div-maps-desp {
            position: relative;
            float: left;
        }
        .div-maps-dos-puntos {
            position: relative;
            float: right;
        }
        .td-maps
        {
            font-weight: bold;
            padding-right: 5px;
        }
        .div-maps-botones
        {
            
            margin-top: 10px;
        }        
        .link-maps
        {
            position: relative;
            border: 1px solid rgb(167, 167, 167);
            margin: 5px 0px;
            padding: 2px 15px;
            left: -1px;
            background: #F8F8F8;
            color: #2941C2;
        }
        .link-maps:hover
        {
            background: #ff8800;
            border: 1px solid #ff8800;
            color: White;
        }
        .link-maps:active
        {

            background: #ff8800;
            border: 1px solid #ff8800;
            color: White;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <label id="Latitud" class="label"><%= Session["Latitud"]%></label>
        <label id="Longitud" class="label"><%= Session["Longitud"]%></label>
        <label id="Zoom" class="label"><%= Session["Zoom"]%></label>
        <label id="IconoMap" class="labelu"><%= Session["IconoMap"]%></label>
        <label id="LatLongIco" class="label"><%= Session["LatLongIco"]%></label>
    
        <div id="map"></div>
    </form>
</body>
</html>
